<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRxPRO</title>
    <meta name="description" content=" Discover a dynamic hospital management system designed to streamlineoperations, enhance patient
    care, and optimize your medical facility's performance.">

    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>

<body>


    <div class="header-bar-container">
        <div class="header-bar">
            <img class="header-bar-icon" src="./images/logo.png" alt="" srcset="">
            <ul class="menu-nav nav pc-nav"   >
                <li data-index="home" class="active"><a href="#home"><span>Home</span></a></li>
                <li data-index="feature"><a href="#feature"><span>Feature</span></a></li>
                <li data-index="price"><a href="#price"><span>Pricing</span></a></li>
                <li data-index="contact"> <a href="#contact"><span>Contact us</span></a> </li>
            </ul>
            <div>
                <button class="login-btn"> <a href="https://clinic.drxpro.com/"> <img src="./images/ico-login.svg"
                            alt=""> Login</a></button>

                <div id="menu" class="mobile-menu">
                    <img style="width: 30px;cursor: pointer;" src="./images/menu.png" alt="">
                </div>

            </div>
        </div>
        <div class="fix-height"></div>
    </div>

    <section id="home" class="intro-section" style="padding-top: 60px;">
        <div class="intro-bg">
            <img src="./images/top-bg.png" alt="" srcset="">
        </div>
        <div class="section-width intro-top">
            <div class="intro-container ">
                <div class="intro-title">Streamline Hospital operations and Easier with <span class="task-ease">Task
                        Ease</span></div>
                <div class="intro-subtitle">
                    Discover a dynamic hospital management system designed to streamlineoperations, enhance patient
                    care, and optimize your medical facility's performance.
                </div>

                <svg class="top-left" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <defs>
                        <style>
                            .cls-1 {
                                fill: #1967d2;
                                fill-rule: evenodd;
                            }
                        </style>
                    </defs>
                    <path id="ico-2" class="cls-1" d="M372.737,232H366V200h32v6.737H372.737V232Z"
                        transform="translate(-366 -200)" />
                </svg>
                <svg class="bottom-right" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <defs>
                        <style>
                            .cls-2 {
                                fill: #fa8476;
                                fill-rule: evenodd;
                            }
                        </style>
                    </defs>
                    <path id="ico-3" class="cls-2" d="M1504.26,453H1511v32h-32v-6.737h25.26V453Z"
                        transform="translate(-1479 -453)" />
                </svg>
            </div>
            <div class="watch-btn-container">
                <button class="video-btn" id="player-btn">Watch Video</button>
            </div>
            <div class="intro-image-container ">
                <img src="./images/3.png" style="width: 100%;" alt="" srcset="">
                <div class="intro-image-animation">

                    <img class="image-framement1" src="./images/1.png" alt="">
                    <img class="image-framement2" src="./images/2.png" alt="">

                </div>
            </div>

        </div>
    </section>


    <section id="feature" class="feature" style="margin-top: 100px;padding-bottom: 70px;">
        <div class="section-width">
            <div class="section-title">Core Features</div>
            <div class="section-subtitle">DRxPRO offers a range of powerful features designed to optimize
                everyday operational
                tasks for hospitals and clinics.</div>

            <div class="feature-container clear">
                <div class="feature-container-item">

                    <div class="feature-container-item-out">
                        <div class="feature-container-item-in">
                            <div class="feature-title">Appointment System</div>
                            <div class="feature-content">Streamline the booking process with ourintelligent scheduling
                                tool, reducing
                                waittimes and improving service.</div>

                            <div class="row-between">
                                <div class="icon-container">

                                    <img src="./images/ico-4.svg" alt="">

                                </div>
                                <div>EXPLORE MORE ></div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="feature-container-item">

                    <div class="feature-container-item-out">
                        <div class="feature-container-item-in">
                            <div class="feature-title">Analytics Suite</div>
                            <div class="feature-content">Gain insights into your operations through our comprehensive
                                data analysis tools, enhancing strategic decision-making.</div>

                            <div class="row-between">
                                <div class="icon-container" style="background: #2fa78d;"> <img src="./images/ico-5.svg"
                                        alt=""></div>
                                <div>EXPLORE MORE ></div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="feature-container-item">

                    <div class="feature-container-item-out">
                        <div class="feature-container-item-in">
                            <div class="feature-title">Data Compliance</div>
                            <div class="feature-content">Ensure adherence to health regulations with our SaaS built for
                                compliance,reducing risks and liabilities.</div>

                            <div class="row-between">
                                <div class="icon-container" style="background: #ffc876;"><img src="./images/ico-6.svg"
                                        alt=""></div>
                                <div>EXPLORE MORE ></div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="feature-container-item">

                    <div class="feature-container-item-out">
                        <div class="feature-container-item-in">
                            <div class="feature-title">24/7 support</div>
                            <div class="feature-content">Our dedicated team is available round-the-clock to ensure your
                                hospital operates smoothly at alltimes.</div>

                            <div class="row-between">
                                <div class="icon-container" style="background: #2fa78d;"><img src="./images/ico-7.svg"
                                        alt=""></div>
                                <div>EXPLORE MORE ></div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="feature-container-item">

                    <div class="feature-container-item-out">
                        <div class="feature-container-item-in">
                            <div class="feature-title">Patient Portal</div>
                            <div class="feature-content">Streamline the booking process with our intelligent scheduling
                                tool, reducing wait times and improving service.</div>

                            <div class="row-between">
                                <div class="icon-container" style="background: #36baff;"><img src="./images/ico-8.svg"
                                        alt=""></div>
                                <div>EXPLORE MORE ></div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="feature-container-item">

                    <div class="feature-container-item-out">
                        <div class="feature-container-item-in">
                            <div class="feature-title">Cloud storage</div>
                            <div class="feature-content">Unlimited and scalable cloud storage solutions to keep patient
                                records safe and accessible from anywhere,anytime.</div>

                            <div class="row-between">
                                <div class="icon-container" style="background: #ff9759;"><img src="./images/ico-9.svg"
                                        alt=""></div>
                                <div>EXPLORE MORE ></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <section style="background: #f8f9f9;padding-top: 80px;">
        <div class="section-width clear">

            <div class="seamless-item" style=" float: left;">
                <div class="section-title" style="text-align: left; ">Seamless Integration</div>
                <div class="section-subtitle" style="text-align: left;">Connect your existing hospital systems to DRxPRO
                    effortlessly for a unified, efficient healthcare management experience.</div>

                <div class="row" style="margin-top: 50px;">
                    <div>
                        <img style="margin-top: 5px;" src="./images/ico-10.svg" alt="">
                    </div>
                    <div style="margin-left: 20px;">
                        <div class="main-title"> <span>Real-time Data</span></div>
                        <div class="main-subtitle">Access patient information and hospital analytics quickly, ensuring
                            data-driven decisions at a moment's notice.</div>
                    </div>

                </div>

                <div class="row" style="margin-top: 20px;">
                    <div>
                        <img style="margin-top: 5px;" src="./images/ico-10.svg" alt="">
                    </div>
                    <div style="margin-left: 20px;">
                        <div class="main-title"> <span>User-Friendly</span></div>
                        <div class="main-subtitle">Our intuitive design makes it simple for your staff to adapt,
                            reducing training time and enhancing productivity.</div>
                    </div>

                </div>

                <div class="row" style="margin-top: 20px;">
                    <div>
                        <img style="margin-top: 5px;" src="./images/ico-10.svg" alt="">
                    </div>
                    <div style="margin-left: 20px;">
                        <div class="main-title"> <span>Secure Cloud</span></div>
                        <div class="main-subtitle">We uphold the highest security standards to protect patient data with
                            end-to-end encryption and compliance adherence.</div>
                    </div>

                </div>
            </div>
            <div class="seamless-item" style=" float: left;text-align: center;">
                <img style="width: 80%;" src="./images/pic-2.png" alt="">


            </div>

        </div>
    </section>

    <section style="background: #ffffff;position: relative;">
        <div class="down-bg">
            <img src="./images/bg-2.png" alt="" srcset="">
        </div>
        <div class="section-width clear" style="padding-top: 70px;">
            <div class="seamless-item" style=" float: left;text-align: center;">
                <!-- <img style="width: 100%;" src="./images/pic-3.png" alt=""> -->
                <img src="./images/animation2.png" style="width: 100%;" alt="" srcset="">

                <div class="animation-container" style="width: 100%;">
                    <img src="./images/animation1.png" alt="" srcset="">
                </div>
            </div>
            <div class="seamless-item" style="float: left;">
                <div class="section-title left ">Featured Services</div>
                <div class="section-subtitle">Discover the powerful tools at the heart of MedManagePro that will
                    transform your hospital's operational effectiveness.</div>
                <div class="row" style="margin-top: 50px;">
                    <div>
                        <img style="margin-top: 5px;" src="./images/ico-10.svg" alt="">
                    </div>
                    <div style="margin-left: 20px;">
                        <div class="main-title"> <span>Data Security</span></div>
                        <div class="main-subtitle">Robust encryption and compliance protocols ensure your patients' data
                            is protected at all times.</div>
                    </div>

                </div>

                <div class="row" style="margin-top: 40px;">
                    <div>
                        <img style="margin-top: 5px;" src="./images/ico-10.svg" alt="">
                    </div>
                    <div style="margin-left: 20px;">
                        <div class="main-title"> <span>Smart Scheduling</span></div>
                        <div class="main-subtitle">Optimize your staff roster and reduce wait times with our intelligent
                            scheduling system.</div>
                    </div>

                </div>

                <div class="row" style="margin-top: 40px;">
                    <div>
                        <img style="margin-top: 5px;" src="./images/ico-10.svg" alt="">
                    </div>
                    <div style="margin-left: 20px;">
                        <div class="main-title"> <span>Analytics Suite</span></div>
                        <div class="main-subtitle">Turn data into insights with customizable reports that help you make
                            informed decisions.</div>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <section id="price">
        <div class="section-width clear" style="padding-top: 80px;">
            <div class="section-title">Select the Plan for Your Needs</div>
            <div class="section-subtitle">Choose the Perfect Plan to Unlock Customized Features</div>

            <div class="feature-container clear">
                <div class="feature-container-item">

                    <div class="feature-container-item-out">
                        <div class="feature-container-item-in">
                            <div class="feature-title">Basic Plan</div>
                            <div class="feature-price">$100 <span class="unit">/ Month</span></div>

                            <div style="text-align: center;">
                                <button class="price-btn">Get Started</button>
                            </div>

                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-10.svg" alt=""> <span>Appointment &
                                    scheduling</span>
                            </div>
                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-10.svg" alt=""> <span>Backend
                                    management</span>
                            </div>
                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-10.svg" alt=""> <span>Doctor
                                    scheduling</span>
                            </div>
                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-11.svg" alt=""> <span>Online
                                    communication</span>
                            </div>
                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-11.svg" alt=""> <span>Marketing
                                    activities</span>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="feature-container-item blue">

                    <div class="feature-container-item-out">
                        <div class="feature-container-item-in">
                            <div class="feature-title white">Basic Plan</div>
                            <div class="feature-price">$300 <span class="unit blue">/ Month</span></div>

                            <div style="text-align: center;">
                                <button class="price-btn blue">Get Started</button>
                            </div>

                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-10.svg" alt=""> <span>Appointment &
                                    scheduling</span>
                            </div>
                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-10.svg" alt=""> <span>Backend
                                    management</span>
                            </div>
                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-10.svg" alt=""> <span>Doctor
                                    scheduling</span>
                            </div>
                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-10.svg" alt=""> <span>Online
                                    communication</span>
                            </div>
                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-10.svg" alt=""> <span>Marketing
                                    activities</span>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="feature-container-item">

                    <div class="feature-container-item-out">
                        <div class="feature-container-item-in">
                            <div class="feature-title">Basic Plan</div>
                            <div class="feature-price">$200 <span class="unit">/ Month</span></div>

                            <div style="text-align: center;">
                                <button class="price-btn">Get Started</button>
                            </div>

                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-10.svg" alt=""> <span>Appointment &
                                    scheduling</span>
                            </div>
                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-10.svg" alt=""> <span>Backend
                                    management</span>
                            </div>
                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-10.svg" alt=""> <span>Doctor
                                    scheduling</span>
                            </div>
                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-10.svg" alt=""> <span>Online
                                    communication</span>
                            </div>
                            <div class="row-center price-item">
                                <img style="margin-top: 5px;" src="./images/ico-11.svg" alt=""> <span>Marketing
                                    activities</span>
                            </div>

                        </div>
                    </div>

                </div>


            </div>
        </div>
    </section>


    <section style="position: relative;margin-top: 156px;">
        <div class="down-bg">
            <img style="margin-top: 70px;width: 100%;height: 100%;" src="./images/bg-4.png" alt="">
        </div>
        <div class="section-width">
            <div class="row-between">
                <div class="section-title left">Why 300+ companies use DRxPRO</div>
                <div>

                </div>
            </div>

            <div class="feature-container clear">
                <div class="why-container-item">

                    <div class="why-container-item-out">
                        <div class="why-container-item-in">
                            <div class="why-container-item-bg"></div>
                            <div class="why-context">
                                I have purchased several different EMRs inthe past but I have found the perfect one!
                                Patients can easily make online appointments ，scheduling easecommunication with clients, patients love it.Customer service is amazing! 10/10 wouldrecommend.
                                
                            </div>
                            <div class="row-center why-bottom">
                                <img src="https://clinic.drxpro.com/files/2/doctor/jamasi.webp" alt="" srcset="">
                                <div>
                                    <div class="docotr-name">MONICA JAMASI DC, MS, CNS (CAND.)</div>
                                    <div class="main-subtitle">Family Chiropractic of Springfield</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="why-container-item">

                    <div class="why-container-item-out">
                        <div class="why-container-item-in">
                            <div class="why-container-item-bg"></div>
                            <div class="why-context">
                                DRxPRO has been a great bridge frommy server based chirotouch software.l can now text, schedule and communicate with my patients instantly.You can also easily view the history of past appointment types and dates/times.

                            </div>
                            <div class="row-center why-bottom">
                                <img src="https://clinic.drxpro.com/files/2/doctor/pitt.webp" alt="" srcset="">
                                <div>
                                    <div class="docotr-name">ALLISON PITT DC                                    </div>
                                    <div class="main-subtitle">Family Chiropractic of Springfield</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="why-container-item">

                    <div class="why-container-item-out">
                        <div class="why-container-item-in">
                            <div class="why-container-item-bg"></div>
                            <div class="why-context">
                                This is a great scheduling app that is so easy to use and has a great layout!

                            </div>
                            <div class="row-center why-bottom">
                                <img src="https://clinic.drxpro.com/files/2/doctor/martinez.webp" alt="" srcset="">
                                <div>
                                    <div class="docotr-name">JANE MARTINEZ DC </div>
                                    <div class="main-subtitle">Family Chiropractic of Alexandria</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="why-container-item">

                    <div class="why-container-item-out">
                        <div class="why-container-item-in">
                            <div class="why-container-item-bg"></div>
                            <div class="why-context">
                                I have been using DRxPRO for over 2 months and | have been impressed with the ease ofuse and ability to access anywhere. l havecustomized all my forms and have workedwith their support when a form wouldn't loadproperly. 
                            </div>
                            <div class="row-center why-bottom">
                                <img src="https://clinic.drxpro.com/files/2/doctor/kim.webp" alt="" srcset="">
                                <div>
                                    <div class="docotr-name">HONGKI KIM DC </div>
                                    <div class="main-subtitle">Family Chiropractic of Alexandria</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="section-width" id="contact"></div>

            <div class="contact clear">
                <div class="contact-item">
                    <div>
                        <img src="./images/logo-2.png" alt="" srcset="">
                    </div>
                    <div class="started">Want To Get Started?</div>
                    <div>The free demo comes with no commitmentsand no credit card required</div>

                    <div class="input-container">

                        <input type="text" placeholder="Add you email">
                        <button class="contact-btn pc">Get started for Free</button>


                    </div>
                    <button class="contact-btn mobile">Get started for Free</button>
                    <div>
                        © 2024 DRxPRO Inc. Copyright and All rights reserved
                    </div>
                </div>
                <div class="contact-item" style="display: flex;justify-content: center;align-items: center;">
                    <div>
                        <div class="started" style="margin-top: 70px;">Contact us</div>
                        <div class="mt20"><img style="margin-right: 10px;" src="./images/ico-15.svg" alt="">(202)768-6948</div>
                        <div class="mt20"> <img style="margin-right: 10px;" src="./images/ico-14.svg" alt="">
                            Business@drxpro.com</div>
                        <div style="height: 60px;"></div>


                        <div style="margin-top: 90px;">Terms and Conditions · Privacy Policy</div>
                    </div>
                </div>
            </div>

        </div>


    </section>

    <div class="dialog-menu" id="dialog-menu">
        <div style="display: flex;justify-content: center;align-items: center;height: 100%;">
            <ul class="menu-nav mobile-nav " id="nav">
                <li data-index="home" class="active"><a href="#home"><span>Home</span></a></li>
                <li data-index="feature"><a href="#feature"><span>Feature</span></a></li>
                <li data-index="price"><a href="#price"><span>Pricing</span></a></li>
                <li data-index="contact"> <a href="#contact"><span>Contact us</span></a> </li>
            </ul>
        </div>

    </div>

    <div class="player-container" id="palyer-dialog">
        <div class="mask" id="stop">
            
        </div>

        
            <div class="player">
                <video id="player"  style="width: 100%;height: 100%;" controls  autoplay="autoplay">
                    <source src="https://clinic.drxpro.com/files/video/v-1.mp4" type="video/mp4">
                </video>
            </div>
     

    </div>

</body>

<script>
    let box = document.querySelector('.animation-container')

    const io = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting && entry.intersectionRatio == 1) {
                box.classList.add('an');
            } else if (entry.intersectionRatio == 0 && !entry.isIntersecting) {
                box.classList.remove('an');
            }
        });
    }, {
        root: null,
        threshold: [0, 0.5, 1]
    });

    io.observe(box);

    document.getElementById('menu').addEventListener('click', e => {
        document.getElementById('dialog-menu').style.display = 'block'
    })



    let introBox = document.querySelector('.intro-image-animation')

    const introIo = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting && entry.intersectionRatio == 1) {
                introBox.classList.add('an');
            } else if (entry.intersectionRatio == 0 && !entry.isIntersecting) {
                introBox.classList.remove('an');
            }
        });
    }, {
        root: null,
        threshold: [0, 0.5, 1]
    });

    introIo.observe(introBox);

    document.getElementById('menu').addEventListener('click', e => {
        document.getElementById('dialog-menu').style.display = 'block'
    })








    document.querySelectorAll('.menu-nav li').forEach(function (element) {
        element.addEventListener('click', function (e) {
            //删除active
            document.querySelectorAll('.menu-nav li').forEach(function (e) {
                e.classList.remove('active')
            })
            document.getElementById('dialog-menu').style.display = 'none'
            let nav = this.dataset.index
            this.classList.add('active')
        })
    })

    let width = document.body.clientWidth > 1280 ? 1280 : document.body.clientWidth
    let framement1 = width / 1280 * 307;
    let framement2 = width / 1280 * 373;


    document.querySelector('.image-framement1').style.width = framement1 + 'px'

    document.querySelector('.image-framement2').style.width = framement2 + 'px'

    
    document.getElementById('player-btn').addEventListener('click',function(){
        document.getElementById('palyer-dialog').style.display = 'block'
    })

    document.getElementById('stop').addEventListener('click',function(){

        document.getElementById('palyer-dialog').style.display = 'none'

        document.getElementById('player').pause()

    
    })
    
</script>

</html>